import { _decorator, Component, Node, v2 } from 'cc';
// import { BaseView } from '../../../../../libs/rxjs/cc3/BaseView';
import { Vec3 } from 'cc';
// import { BindNodeTouchStartEnd } from '../../../../../libs/rxjs/cc3/BindNode';
// import { ReactiveProperty } from '../../../../../libs/rxjs/cc3/ReactiveProperty';
import { Observer, Subscription } from 'rxjs';
// import { nullifySubscription } from '../../../../../libs/rxjs/utils';
// import { TweenToStart } from '../../../../../libs/rxjs/cc3/TweenStart';
import { Observable } from 'rxjs';
import { EventTouch } from 'cc';
import { BaseView } from '../../rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../rxjs/cc3/ReactiveProperty';
import { BindNodeTouchStartEnd } from '../../rxjs/cc3/BindNode';
import { nullifySubscription } from '../../rxjs/utils';
import { TweenToStart } from '../../rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

const _v20 = v2();
const _v21 = v2();

@ccclass('ButtonPress')
export class ButtonPress extends BaseView {

    @property(Node)
    capNode: Node = null;

    @property(Vec3)
    zeroPosition: Vec3 = new Vec3(0, 0, 0);

    @property(Vec3)
    onePosition: Vec3 = new Vec3(0, -8, 0);

    pressed = ReactiveProperty.Create(false);

    willBind(): void {
        this.capNode.setPosition(this.zeroPosition);
    }

    useObserves() {
        return [
            this.pressed.subscribe(this.pressedChanged.bind(this)),
            BindNodeTouchStartEnd(this.capNode, this.pressed).subscribe(eventTouch => {
                if (this.observer != null) {
                    this.observer.next(eventTouch);
                }
                if (this.observerClick != null) {
                    if (eventTouch.type == 'touch-end' || eventTouch.type == 'touch-cancel') {
                        eventTouch.getLocation(_v20);
                        eventTouch.getStartLocation(_v21);
                        if (_v20.subtract(_v21).length() < 10) {
                            this.observerClick.next(eventTouch);
                        }
                    }
                }
            }),
        ];
    }

    onDestroyView(): void {
        nullifySubscription.call(this, '_sub_anim');
    }

    _sub_anim: Subscription = null;

    pressedChanged() {
        nullifySubscription.call(this, '_sub_anim');
        if (this.pressed.value) {
            // this.capNode.position = this.onePosition;
            this._sub_anim = TweenToStart(this.capNode, .04, { position: this.onePosition }).subscribe();
        } else {
            // this.capNode.position = this.zeroPosition;
            this._sub_anim = TweenToStart(this.capNode, .04, { position: this.zeroPosition }).subscribe();
        }
    }

    observer: Observer<EventTouch> = null;

    asObservable() {
        return new Observable(observer => {
            this.observer = observer;
            return () => {
                this.observer = null;
            };
        });
    }


    observerClick: Observer<EventTouch> = null;

    asClickObservable() {
        return new Observable(observer => {
            this.observerClick = observer;
            return () => {
                this.observerClick = null;
            };
        });
    }

}

